<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/20
  Time: 10:21 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="/css/order/css.css" rel="stylesheet">

</head>
<body>
<div>
    <table class="table table-bordered text-center">
        <tr style="background-image: linear-gradient(#ffffff, #f2f3f2);height: 30px;font-size:15px;line-height: 30px">
            <th>ID</th>
            <th>收货人</th>
            <th>收货电话</th>
            <th>收货地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
            <c:forEach items="${addrList}" var="a">
                <tr>
                    <td>${a.id}</td>
                    <td>${a.recName}</td>
                    <td>${a.recPhone}</td>
                    <td>${a.recAddress}</td>
                    <td>
                        <a href="/address/delete/${a.id}" onclick="return delete_address()" class="btn btn-danger">删除</a>
                        <span class="btn btn-info" onclick="javasrcipt:getAddress('${a.id}')">编辑</span>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<div class="shade">
</div>
<div class="edit-address-info card" id="edit-name-div">
    <div class="col-xs-12 shade_colse">
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_div()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <input type="text" hidden id="ids">
        <div class="col-xs-12 shade_from">
            <form action="" method="post">
                <div class="col-xs-12">
                    <input class="input_style" type="" name="" id="edit_user_name" value=""
                           placeholder="&nbsp;&nbsp;"/>
                </div>
                <div class="col-xs-12">
                    <input class="input_style" type="" name="" id="edit_user_phone" value=""
                           placeholder="&nbsp;&nbsp;"/>
                </div>
                <div class="col-xs-12">
                    <input class="input_style" type="" name="" id="edit_user_address" value=""
                           placeholder="&nbsp;&nbsp;"/>
                </div>
                <div class="col-xs-12">
                    <button class="btn_remove" type="button" onclick="close_div()">
                           取消</button>
                    <input type="button" class="sub_set" onclick="javascript:edit_address()"  value="提交"/>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
   $(function (){
       $(".edit-address-info").hide();
       $(".shade").hide();
   });

    function delete_address(){
        return confirm("确定删除该地址吗？");
    }

    function open_div(){
        $(".shade").show();
        $(".edit-address-info").show();

    }

    function close_div(){
        $(".edit-address-info").hide();
        $(".shade").hide();
    }

    function edit_address(){
        var name = $("#edit_user_name").val();
        var phone = $("#edit_user_phone").val();
        var address = $("#edit_user_address").val();
        var id = $("#ids").val();
        $.ajax({
            type:"POST",
            data:{"id":id,"recName":name,"recPhone":phone,"recAddress":address},
            url:"/address/editAddress",
            success:function (data){
                if (data.code == 0){
                    alert("修改成功");
                    refresh();
                    close_div();
                }else {
                    alert(data.message);
                }
            }

        });
    }

    function getAddress(id){
        $.ajax({
            type:"GET",
            data:{"id":id},
            url:"/address/getAddress",
            success:function (data){
                var d = data.data;
                $("#ids").val(d.id);
                $("#edit_user_name").val(d.recName);
                $("#edit_user_phone").val(d.recPhone);
                $("#edit_user_address").val(d.recAddress);
                open_div();
            }
        });
    }

    function refresh(){
        $.ajax({
            type:"GET",
            url:"/address/list",
            success:function (data){
                var d = data.data;
                var c = '';
                for (let i = 0; i < d.length; i++) {
                    var add = d[i];
                    c+='<tr>\n' +
                        '                    <td>'+add.id+'</td>\n' +
                        '                    <td>'+add.recName+'</td>\n' +
                        '                    <td>'+add.recPhone+'</td>\n' +
                        '                    <td>'+add.recAddress+'</td>\n' +
                        '                    <td>\n' +
                        '                        <a href="/address/delete/'+add.id+'" onclick="return delete_address()" class="btn btn-danger">删除</a>\n' +
                        '                        <span class="btn btn-info" onclick="getAddress(\''+add.id+'\')">编辑</span>\n' +
                        '                    </td>\n' +
                        '                </tr>'
                }
                $("#tbody").html(c);
            }
        });
    }
</script>
</body>
</html>
